<template>
  <div class="index-box">
    <div class="box" v-for="(item, index) in list" :key="index">
      <div>
        <img width="200" v-bind:src="item.img" />
      </div>
      <div>
        <h4>{{ item.title }}</h4>
        <p v-text="item.text"></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数据
      list: [
        {
          img:
            "http://www.jz5158.cn/static/images/books/%E5%8C%97%E4%B8%8A%E8%B5%84%E9%87%91%E6%B5%81%E7%B3%BB%E7%BB%9F.png",
          title: "机智北上资金流",
          text: "简单有效的跟庄利器，主力建仓出货一目了然",
        },
        {
          img:
            "http://www.jz5158.cn/static/images/books/%E5%8C%97%E4%B8%8A%E8%B5%84%E9%87%91%E6%B5%81%E7%B3%BB%E7%BB%9F.png",
          title: "机智北上资金流",
          text: "简单有效的跟庄利器，主力建仓出货一目了然",
        },
        {
          img:
            "http://www.jz5158.cn/static/images/books/%E5%8C%97%E4%B8%8A%E8%B5%84%E9%87%91%E6%B5%81%E7%B3%BB%E7%BB%9F.png",
          title: "机智北上资金流",
          text: "简单有效的跟庄利器，主力建仓出货一目了然",
        },
        {
          img:
            "http://www.jz5158.cn/static/images/books/%E5%8C%97%E4%B8%8A%E8%B5%84%E9%87%91%E6%B5%81%E7%B3%BB%E7%BB%9F.png",
          title: "机智北上资金流",
          text: "简单有效的跟庄利器，主力建仓出货一目了然",
        },
      ],
    };
  },
};
</script>

<style>
.index-box {
  display: flex;
  flex-wrap: wrap;
}
.box {
  display: flex;
  width: 50vw;
}
</style>
